<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Management System</title>
    <link rel="stylesheet" href="./layui/css/layui.css"/>
    <link rel="stylesheet" href="./css/global.css">
    <script src="./layui/layui.js"></script>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/moment.js"></script>
    <script src="../js/global.js"></script>
    <script src="../js/api.js"></script>
</head>
<body>
<!-- Header -->
<header class="layui-header">
    <ul class="layui-nav" lay-filter="nav">
        <li class="layui-nav-item"><a href="//player.bilibili.com/player.html?aid=752572710&bvid=BV19k4y1d7DX&cid=172652082&page=1" target="if"><b>Student MS</b></a></li>
        <li class="layui-nav-item layui-this"><a href="./views/student.html" target="if">Student Module</a></li>
        <li class="layui-nav-item"><a href="./views/class.html" target="if">Class Module</a></li>
        <li class="layui-nav-item"><a href="./views/grade.html" target="if">Grade Module</a></li>
        <li class="layui-nav-item"><a href="./views/course.html" target="if">Course Module</a></li>
        <li class="layui-nav-item"><a href="./views/courseArrangement.html" target="if">Course Arrangement</a></li>
        <li id="echarts_view" class="layui-nav-item"><a href="./views/echarts.html" target="if">Echarts View</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
            <a href="javascript:;">
                <img src="./images/head.jpg" class="layui-nav-img">
                <output id="curPersonName"></output>
            </a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:selfInfo();">我的资料</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:logout();">退了</a>
        </li>
    </ul>
    <!--  马保国视频  -->
    <!--    <iframe src="//player.bilibili.com/player.html?aid=372769840&bvid=BV1vZ4y137Qo&cid=256382638&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->
</header>

<!-- Content -->
<div class="iframe-content">
<!--    <iframe src="./views/student.html" name="if" frameborder="0" width="100%" height="846px"></iframe>-->
    <iframe src="./views/student.html"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
            name="if" frameborder="0" width="100%" height="846px"
    > </iframe>
</div>

<!--  Footer  -->
<footer class="footer">
    &copy; Student MS - 涂华庆 版权所有
</footer>


<!-- 个人资料模板 -->
<script type="text/html" id="self_info">
    <div class="padding">
        <form class="layui-form" id="add_form" lay-filter="self_info">
            <div class="layui-form-item layui-input-inline layui-hide">
                <label class="layui-form-label">ID:</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id" lay-verify="required" placeholder="请输入id" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">学号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="jobNo" lay-verify="required" placeholder="请输入学号" autocomplete="off"
                           disabled
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-inline">
                    <input type="text" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                           disabled
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="gender" value="男" title="男" disabled>
                    <input type="radio" name="gender" value="女" title="女" disabled>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">生日:</label>
                <div class="layui-input-inline">
                    <input id="birthDay" type="text" name="birthDay" placeholder="请输入生日" autocomplete="off"
                           disabled
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">地址:</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" placeholder="请输入地址" autocomplete="off"
                           disabled
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">电话:</label>
                <div class="layui-input-inline">
                    <input type="phone" maxlength="11" name="phone" placeholder="请输入电话"
                           disabled
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">年份:</label>
                <div class="layui-input-inline">
                    <input type="text" name="enrollmentYear" placeholder="请输入入学年份" autocomplete="off"
                           disabled
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">班级:</label>
                <div class="layui-input-inline">
                    <select name="classId" id="class_sel" disabled>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">类型:</label>
                <div class="layui-input-inline">
                    <select name="personTypeId" lay-verify="required" id="persontype_sel" disabled>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入内容" class="layui-textarea" disabled></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <div class="layui-input-inline">
                    <input class="layui-icon layui-icon-search layui-btn layui-bg-blue"
                           id="self_info_form_submit"
                           lay-submit
                           type="hidden"
                           lay-filter="self_info">
                </div>
            </div>
        </form>
    </div>

</script>
<!-- JavaScript -->
<script>
    layui.use(['element', 'layer', 'form', 'laydate'], async function () {
        let element = layui.element,
            layer = layui.layer,
            form = layui.form,
            laydate = layui.laydate

        let curPerson

        await created()

        // 模拟点一下student模块
        $('#student_module').click()

        // 登出
        window.logout = function () {
            localWareHouse.rm('curPerson')
            window.location.href = '//localhost:8080/login.html'
        }

        // 打开我的资料
        window.selfInfo = function () {
            layer.open({
                title: '个人资料',
                type: 1,
                area: ['1000px', '500px'],
                anim: 3,
                maxmin: true,
                btnAlign: 'c',
                content: $('#self_info').html(),
                btn: ['保存', '算了'],
                async success() {
                    // 加载各种码表
                    let classInfos = (await axios(api.class.get)).data.data
                    let personTypes = (await axios(api.personType.get)).data.data
                    classInfos.forEach(o => $('#class_sel').append(new Option(o.className, o.id)))
                    personTypes.forEach(p => $('#persontype_sel').append(new Option(p.personTypeName, p.id)))
                    laydate.render({
                        elem: '#birthDay',
                        format: 'yyyy-MM-dd'
                    });
                    form.render(null, 'self_info')
                    form.val('self_info', {...curPerson})
                },
                yes() {
                    // 模拟提交表单
                    $('#self_info_form_submit').click()
                },
                btn2(index) {
                    layer.close(index)
                }
            })
        }

        // 监听个人信息被修改
        form.on('submit(self_info)', async function (data) {
            console.log(data)
            layer.load()
            let isOk = (await change(data.field))
            if (isOk) {
                layer.closeAll()
                layer.msg('保存信息成功', {icon: 6})
            } else {
                layer.closeAll()
            }
            return false;
        })

        // change方法
        async function change(o) {
            return (await axios.get(api.person.upd, {params: {...o}})).data.data
        }

        // Created
        async function created() {
            curPerson = localWareHouse.get('curPerson')
            if (!!curPerson?.id) {
                // 得到最新的当前用户信息
                curPerson = (await axios.get(api.person.get, {params: {id: curPerson.id}})).data.data[0]
                // 格式化一下birthDay
                curPerson.birthDay = moment(curPerson.birthDay).format('YYYY-MM-DD')
                // 根据用户的角色(类型)personTypeId来获取他所拥有的的权限码数组
                curPerson.abilities = (await axios.get(api.ability.getBilities, {params: {personTypeId: curPerson.personTypeId}})).data.data
                // 重载localStorage中的数据
                localWareHouse.set('curPerson', curPerson)
                // 右上角显示
                $('#curPersonName').text(curPerson.name)
                // 完成
                console.log('当前登录用户: ', curPerson)
                // 不是管理员无法查看Echarts View
                if(!['persontype001','persontype002'].includes(curPerson.personTypeId)){
                    $('#echarts_view').remove()
                }
            } else {
                window.location.href = '//localhost:8080/login.html'
            }
        }
    })

</script>
</body>
</html>
